<template>
    <view>
        <view class="top-box">
            <uni-nav-bar leftIcon="left" title="我的收藏" statusBar :border="false" backgroundColor="#FFFFFF"
                @clickLeft="handleBack"></uni-nav-bar>
        </view>
        <view class="project-list">
            <projectItem v-for="(item, index) in projects" :key="index" :itemData="item.record" />
        </view>
    </view>
</template>
<script setup>
import {
    ref,
    reactive
} from 'vue'

import {
    onShow,
    onReachBottom
} from '@dcloudio/uni-app'
import projectItem from '@/components/projectItem.vue'
import {
    getCollectList
} from '@/api/index.js'

const projects = ref([])
const searchData = reactive({
    page: ''

});

onShow((options) => {
    searchData.page = 1
    getData()
})


onReachBottom(() => {
    searchData.page += 1
    getData()
})

const getData = async () => {
    let res = await getCollectList(searchData)
    if (res?.code) {
        console.log(res.data);
        const tempList = res.data?.list || []
        if (searchData.page == 1) {
            projects.value = []
        }
        projects.value = projects.value.concat(tempList)
        if (!tempList.length && searchData.page > 1) {
            searchData.page = searchData.page - 1
        }
    } else {
        if (searchData.page > 1) {
            searchData.page = searchData.page - 1
        }
    }
}

const handleBack = () => {
    uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.top-box {
    position: sticky;
    top: 0;
}

.project-list {
    margin-top: 4rpx;
    padding-bottom: 20rpx;
}
</style>